/**
 * 验证码
 */
import { defineComponent } from "vue";
export default defineComponent({
	props: {
		identifyCode: {
			type: String,
			default: ""
		},
		fontSizeMin: {
			type: Number,
			default: 20
		},
		fontSizeMax: {
			type: Number,
			default: 35
		},
		backgroundColorMin: {
			type: Number,
			default: 180
		},
		backgroundColorMax: {
			type: Number,
			default: 240
		},
		colorMin: {
			type: Number,
			default: 50
		},
		colorMax: {
			type: Number,
			default: 160
		},
		lineColorMin: {
			type: Number,
			default: 40
		},
		lineColorMax: {
			type: Number,
			default: 180
		},
		dotColorMin: {
			type: Number,
			default: 0
		},
		dotColorMax: {
			type: Number,
			default: 255
		},
		contentWidth: {
			type: Number,
			default: 112
		},
		contentHeight: {
			type: Number,
			default: 38
		}
	},
	emits: ["update:identifyCode"],
	setup(props, { emit, expose }) {
		onMounted(() => {
			drawPic();
		});
		// 生成一个随机数
		function randomNum(min: number, max: number) {
			return Math.floor(Math.random() * (max - min) + min);
		}
		// 生成一个随机的颜色
		function randomColor(min: number, max: number) {
			let r = randomNum(min, max);
			let g = randomNum(min, max);
			let b = randomNum(min, max);
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		function generatorCodeData() {
			let val = "";
			val += randomNum(0, 9);
			val += randomNum(0, 9);
			val += randomNum(0, 9);
			val += randomNum(0, 9);
			emit("update:identifyCode", val);
			return val;
		}
		function drawPic() {
			let code = generatorCodeData();
			let canvas: HTMLElement | null = document.getElementById("s-canvas");
			let ctx: CanvasRenderingContext2D | null = (canvas as HTMLCanvasElement).getContext("2d");
			ctx!.textBaseline = "bottom";
			// 绘制背景
			ctx!.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
			ctx!.fillRect(0, 0, props.contentWidth, props.contentHeight);
			drawLine(ctx!);
			drawDot(ctx!);
			// 绘制文字
			for (let i = 0; i < code.length; i++) {
				drawText(ctx!, code[i], i);
			}
		}
		// eslint-disable-next-line @typescript-eslint/no-unused-vars
		function drawText(ctx: CanvasRenderingContext2D, txt: string, i: number) {
			ctx.fillStyle = randomColor(props.colorMin, props.colorMax);
			ctx.font = randomNum(props.fontSizeMin, props.fontSizeMax) + "px SimHei";
			let x = (i + 1) * (props.contentWidth / (props.identifyCode.length || 4 + 1)) - 20;
			let y = randomNum(props.fontSizeMax, props.contentHeight - 5);
			let deg = randomNum(-45, 45);
			// 修改坐标原点和旋转角度
			ctx.translate(x, y);
			ctx.rotate((deg * Math.PI) / 180);
			ctx.fillText(txt, 0, 0);
			// 恢复坐标原点和旋转角度
			ctx.rotate((-deg * Math.PI) / 180);
			ctx.translate(-x, -y);
		}
		function drawLine(ctx: CanvasRenderingContext2D) {
			// 绘制干扰线
			for (let i = 0; i < 3; i++) {
				ctx.strokeStyle = randomColor(props.lineColorMin, props.lineColorMax);
				ctx.beginPath();
				ctx.moveTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
				ctx.lineTo(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight));
				ctx.stroke();
			}
		}
		function drawDot(ctx: CanvasRenderingContext2D) {
			// 绘制干扰点
			for (let i = 0; i < 30; i++) {
				ctx.fillStyle = randomColor(0, 255);
				ctx.beginPath();
				ctx.arc(randomNum(0, props.contentWidth), randomNum(0, props.contentHeight), 1, 0, 2 * Math.PI);
				ctx.fill();
			}
		}
		expose({ drawPic });
		return () => {
			return (
				<div class="s-canvas cursor-pointer" onClick={drawPic}>
					<canvas id="s-canvas" width={props.contentWidth} height={props.contentHeight}></canvas>
				</div>
			);
		};
	}
});
